<template>
  <uni-popup
    type="bottom"
    ref="reasonPopup"
    @change="handleClose"
    borderRadius="16rpx 116rpx 0rpx 0rpx"
    background-color="#fff"
    :mask-click="true"
  >
    <view class="falutList">
      <view class="close">
        <view></view>
      </view>
      <view class="tree-container">
        <view class="title">{{`选择任务故障原因(${checkedList.ids&&checkedList.ids.length||0})`}}</view>
        <view class="line"></view>
        <faultTree
         
          :tree="treeData"
          :defaultProps="defaultProps"
          :multiSelect="multiSelect"
          ref="faultTree"
          :isFlag="true"
          @onChecked="onChecked"
          :selectIds="defaultChecked"
        />
      </view>
      <view class="popup-footer-btns">
        <view class="clear-btn btn" @click="handleClear">清空已选项</view>
        <view class="confirm-btn btn" @click="handleConfirm">确定</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import faultTree from '@/components/select-tree/select-tree.vue';
export default {
	props: {
		visible: { type: Boolean },
		treeData: { type: Array, default: () => [] },
		defaultChecked: { type: Array, default: () => [] },
		defaultProps: {
			type: Object,
			default: () => ({ id: 'id', label: 'name', children: 'childList' }),
		},
		multiSelect: { type: Boolean, default: true },
	},
	components: { faultTree },
	data() {
		return {
			checkedList: {ids:[]},
		};
	},

	watch: {
		defaultChecked: {
			immediate: true,
			handler(val) {
				this.checkedList = [...val];
				this.$nextTick(() => {
					if (this.$refs.faultTree && this.$refs.faultTree.setChecked) {
						this.$refs.faultTree.setChecked(val);
					}
				});
			},
		},
		// visible(val) {
		// 	console.log('visible', val);
		// 	if (val) {
		// 		this.$refs.reasonPopup.open();
		// 	} else {
		// 		this.$refs.reasonPopup.close();
		// 	}
		// }
	},
	methods: {
		onChecked(list) {
			this.checkedList = list;
		},
		handleClear() {
			this.checkedList = {};
			if (this.$refs.faultTree && this.$refs.faultTree.clear) {
				this.$refs.faultTree.clear();
			}
			this.$emit('clear');
		},
		handleConfirm(res) {
			// console.log(res,'父组件');
			// return;
			this.$emit('confirm', this.checkedList);
		},
		handleClose(res) {
			// console.log(res, '关闭窗口');
			if (!res.show) {
				this.$emit('close');
			}
		},
	},
};
</script>

<style scoped lang="scss">
.falutList {
  background: #fff;
  padding: 32rpx 0 120rpx 0;
  min-height: 400rpx;
  border-radius: 8rpx 8rpx 0 0;
}
.tree-container {
  padding: 0 32rpx;
  padding-bottom: 40rpx;
  .title{
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    padding: 20rpx 0;

  }
  .line{
    width:calc(750rpx + 20rpx);
    height: 16rpx;
    background: #F3F6F8;
    margin-left: -40rpx;
  }
}
.popup-footer-btns {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  // justify-content: space-between;
  padding: 24rpx 32rpx 32rpx 32rpx;
  z-index: 100;
  border-top: 2rpx solid #eeeeee;
  
}
.btn{
  font-size: 28rpx;
  height: 68rpx;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.clear-btn {
  background: #f3f6f8;
  color: #0091ff;
  border-radius: 8rpx 0rpx 0rpx 8rpx;
  
}
.confirm-btn {
  
  background: #0091ff;
  color: #fff;
  border-radius: 0rpx 8rpx 8rpx 0rpx;
 
}
.close {
  display: flex;
  justify-content: center;
  view {
    width: 64rpx;
    height: 10rpx;
    border-radius: 5rpx;
    background: #d8d8d8;
  }
}
</style>
